import { SaveOutlined, PlusOutlined } from '@ant-design/icons';
import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormText,
  ProFormItem,
  ProFormSelect,
  ProFormRadio,
  ProFormDigit,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { Space, Button, message, Modal } from 'antd';
import { useRef, useEffect, useState } from 'react';
import {
  RoleInfoSaveRequest,
  checkedRoleCnName,
  checkedRoleEnName,
} from '@/pages/Dashboard/System/Role/service';
import { getSystemOfficeTreeData } from '@/pages/Dashboard/System/Office/service';
import { RoleInfoSaveRequestParams } from './data';

import styles from './style.less';
const RoleFormModal = ({
  roleFormValues,
  show,
  onCancel,
  onSuccess,
}: {
  roleFormValues: any;
  show: boolean;
  onCancel?: () => void;
  onSuccess?: () => void;
}) => {
  const [loading, setLoading] = useState(false);
  const formRef = useRef<ProFormInstance>();

  const handleSubmit = (e: any) => {
    formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
      setLoading(true);
      const requestParams: RoleInfoSaveRequestParams = val;
      RoleInfoSaveRequest(requestParams).then((res) => {
        if (res.code == 200) {
          setLoading(false);
          onSuccess?.();
          onCancel?.();
        } else {
          setLoading(false);
        }
      });
    });
  };

  // 验证角色中文名
  const checkRoleCnname = (name: string) => {
    // 这个是rules自定义的验证方法
    return new Promise((resolve, reject) => {
      // 返回一个promise
      checkedRoleCnName({ name: name })
        .then((res) => {
          // 这个是后台接口方法
          if (res.responseCode === '000000') {
            console.log(11, res.data);
            resolve(res.data);
          } else resolve(false);
        })
        .catch((error) => {
          reject(error);
        });
    });
  };
  // 验证角色英文名
  const checkRoleEnname = (enName: string) => {
    // 这个是rules自定义的验证方法
    return new Promise((resolve, reject) => {
      // 返回一个promise
      checkedRoleEnName({ enName: enName })
        .then((res) => {
          // 这个是后台接口方法
          if (res.responseCode === '000000') {
            console.log(11, res.data);
            resolve(res.data);
          } else resolve(false);
        })
        .catch((error) => {
          reject(error);
        });
    });
  };
  return (
    <Modal
      title={<Space>{Object.keys(roleFormValues).length > 0 ? '修改角色' : '添加角色'}</Space>}
      visible={show}
      centered
      destroyOnClose={true}
      footer={false}
      bodyStyle={{ padding: 10 }}
      onCancel={onCancel}
    >
      <ProForm
        initialValues={roleFormValues}
        formRef={formRef}
        layout="horizontal"
        className={styles.form}
        labelCol={{
          style: {
            width: 80,
          },
        }}
        submitter={false}
      >
        <ProFormText
          name="name"
          label="角色名称"
          required
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
            {
              validator: (rule, value, callback) => {
                checkRoleCnname(value).then((res) => {
                  if (res) {
                    // console.log(33, res)
                    callback();
                  } else {
                    callback('角色名已存在');
                  }
                });
              },
            },
          ]}
        ></ProFormText>
        <ProFormText
          name="enname"
          label="英文名称"
          required
          rules={[
            {
              required: true,
              message: '请输入角色英文名称',
            },
            {
              validator: (rule, value, callback) => {
                checkRoleEnname(value).then((res) => {
                  if (res) {
                    // console.log(33, res)
                    callback();
                  } else {
                    callback('角色名已存在');
                  }
                });
              },
            },
          ]}
        ></ProFormText>
        <ProFormTreeSelect
          name="officeId"
          label="部门"
          placeholder="请选择"
          allowClear
          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请选择部门',
          // },
          // ]}
          request={async () => {
            const res = await getSystemOfficeTreeData();
            return res.data;
          }}
        />
        <ProFormRadio.Group
          label="角色类型"
          name="roleType"
          required
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
          options={[
            {
              label: '管理角色',
              value: '0',
            },
            {
              label: '普通角色',
              value: '1',
            },
          ]}
        />
        <ProFormSelect
          name="dataScope"
          label="数据权限"
          options={[
            {
              label: '全部数据',
              value: 1,
            },
            {
              label: '部门及子部门数据',
              value: 2,
            },
            {
              label: '本部门数据',
              value: 3,
            },
            {
              label: '本人数据',
              value: 4,
            },
          ]}
          required
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        ></ProFormSelect>
        {/* <ProFormRadio.Group
        label="状态"
        name="status"
        required
        rules={[
        {
            required: true,
            message: '请选择',
        },
        ]}
        options={[
          {
            label: '正常',
            value: '1',
          },
          {
            label: '停用',
            value: '0',
          }
        ]}
    /> */}
        {/* <ProFormDigit label="排序" name="sortNum" min={1} max={100} /> */}
        <ProFormItem>
          <Button
            size="large"
            type="primary"
            loading={loading}
            onClick={handleSubmit}
            icon={<SaveOutlined />}
            style={{ marginLeft: 80 }}
          >
            确定
          </Button>
        </ProFormItem>
      </ProForm>
    </Modal>
  );
};

export default RoleFormModal;
